/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 15:31:32
 * @Auditor:
 */
import React, { memo, useState, useRef } from 'react';
import { Input, Modal, } from 'antd';
import { Formx } from '@library';
import { FormxRefProps } from '@library/components/formx/interface';
import { useDrag, DragSourceMonitor, useDrop } from 'react-dnd';
import Icon from './../../icon/Icon';
import styles from './style.module.scss';

const type = 'optionSettingItem';

const style: React.CSSProperties = {
  marginBottom: '.5rem',
  cursor: 'move',
};

interface ItemProps {
  originalIndex: number;
  id: string;
  type: string;
}

interface IProps {
  originalIndex: number;
  item: any;
  remove(index: number): void;
  changeValue(index: number, value: any): void;
  move(draggedId: string, hoverId: string): void;

}

const formItems = [
  {
    name: 'value',
    label: 'value',
    disabled: true
  },
  {
    name: 'label',
    label: '中文',
  },
  {
    name: 'labelEn',
    label: '英文',
  },
];


const OptionSettingItem = ({ originalIndex, item, remove, move, changeValue }: IProps) => {

  const formRef = useRef<FormxRefProps>(null);

  const [visible, setVisible] = useState(false);
  const [initialValues, setInitialValues] = useState<any>({});

  const [{ isDragging }, drag, dragPreview] = useDrag(
    {
      type,
      item: { type, originalIndex, id: item.value as string },

      collect: (moniter: DragSourceMonitor) => ({
        isDragging: moniter.isDragging(), // dragCollect.isDragging
      }),
    },
    []
  );

  const [, drop] = useDrop(
    () => ({
      accept: type,
      canDrop: () => false,
      hover: ({ id: draggedId }: ItemProps) => {
        if (draggedId !== item.value) {
          move(draggedId, item.value as string);
        }
      },
    }),
    [move]
  );

  const opacity = isDragging ? 0 : 1;


  const onOk = () => {
    const res = formRef.current?.getFieldsValue();
    setVisible(false);
    changeValue(initialValues.originalIndex, res);
  };

  return (
    <li ref={(node) => dragPreview(drop(node))} style={{ ...style, opacity, marginTop: originalIndex === 0 ? '0' : '8px' }}>
      <span ref={(node) => drag(node)} className={styles.move}>
        <Icon icon="&#xe671;" />
      </span>
      <Input value={item.value as string} readOnly />
      <Icon onClick={() => {
        setInitialValues({ ...item, originalIndex });
        setVisible(true);
      }} className={styles.remove} icon="&#xe656;" />
      <Icon onClick={() => remove(originalIndex)} className={styles.remove} icon="remove" />

      <Modal title='编辑关联字段' onOk={onOk} destroyOnClose visible={visible} onCancel={() => setVisible(false)} width={500} bodyStyle={{ height: '50vh', overflow: 'auto' }}>
        <Formx groupNumber={1} ref={formRef} formItems={formItems} initialValues={initialValues} />

      </Modal>
    </li>
  );
};

export default memo(OptionSettingItem);
